import React, {Component} from 'react';
import './style/style.less'
import {CheckCircleFilled} from "@ant-design/icons";

const TheSteps = ({}) => {
    const type = 5
    const data = [
        {
            title: '生成订单',
            tip: '待付款',
            date: '2021-02-23 13:23:45'
        },
        {
            title: '已付款',
            tip: '待发货',
            date: '2021-02-23 13:23:45'
        },
        {
            title: '已发货',
            tip: '待收货',
            date: '2021-02-23 13:23:45'
        },
        {
            title: '已收货',
            tip: '待结束',
            date: '2021-02-23 13:23:45'
        }
    ]
    return <div className={'steps'}>
        {
            data.map((v, i) => {
                return <div className={'step-content'}>
                    <div className={`check-content ${type === i + 1 && 'date'}`}>
                        {type === i + 1 ? <CheckCircleFilled style={{fontSize: '32px', color: '#0264fc'}}/> :
                            <span className={'garden'}/>}
                        <span className={'check-middle'}>{v.title}</span>
                        {type === i + 1 && <span>{v.date}</span>}
                    </div>
                    <span className={'arrow'}/>
                    <div className={'point-content'}>
                        <span className={'point'}/>
                        <span className={'point'}/>
                        <span className={'point'}/>
                        {type === i + 1 && <span className={'point-title'}>{v.tip}</span>}
                    </div>
                    <span className={'arrow'}/>
                </div>
            })
        }
        <div className={'step-content'}>
            <div className={`check-content ${type === 5 && 'date'}`}>
                {type === 5 ? <CheckCircleFilled style={{fontSize: '32px', color: '#0264fc'}}/> :
                    <span className={'garden'}/>}
                <span className={'check-middle'}>已完成</span>
                {type === 5 && <span>2021-02-23 13:23:45</span>}
            </div>
        </div>
    </div>
}
export default TheSteps